<script>
import ContainerFooter from "@/components/ContainerFooter.vue";
import ContextBox from "@/components/ContextBox.vue";
import MainHeader from "@/components/MainHeader.vue";
import NoticeBox from "@/components/NoticeBox.vue";

export default {
  name: "Home",
  components:{NoticeBox, MainHeader, ContextBox, ContainerFooter}
  ,data(){
    return {
      displayHead:true
    }
  }
  ,methods:{
    handleScroll(){
      let scrollHeight = document.documentElement.scrollTop;
      if (scrollHeight > 100){
        this.displayHead = false;
      }else {
        this.displayHead = true;
      }
    }

  }
  ,mounted() {
    window.addEventListener("scroll", this.handleScroll);
  }
  ,
  destroyed(){
    window.removeEventListener("scroll", this.handleScroll);
  }
}
</script>

<template>
  <div class="w-full h-full flex flex-col items-center ">

    <transition enter-active-class="animate__animated animate__fadeInDown"
    leave-active-class="animate__animated animate__fadeOutUp">
      <MainHeader v-if="displayHead" class="z-50"/>
    </transition>
    <NoticeBox class="mt-40 mb-24 "></NoticeBox>
    <ContextBox></ContextBox>
    <router-view></router-view>
    <ContainerFooter></ContainerFooter>
  </div>
</template>

<style scoped>

</style>